<template>
  <div class="min-h-screen flex flex-col">
    <header class="bg-white shadow-sm">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="text-xl font-bold text-primary">Nuxt 4 Project</div>
        <nav>
          <ul class="flex space-x-6">
            <li><NuxtLink to="/" class="text-gray-700 hover:text-primary">首页</NuxtLink></li>
            <li><NuxtLink to="/about" class="text-gray-700 hover:text-primary">关于</NuxtLink></li>
            <li><NuxtLink to="/contact" class="text-gray-700 hover:text-primary">联系我们</NuxtLink></li>
          </ul>
        </nav>
      </div>
    </header>

    <main class="flex-grow">
      <slot />
    </main>

    <footer class="bg-gray-800 text-white py-6">
      <div class="container mx-auto px-4 text-center">
        <p>&copy; 2025 Nuxt 4 Project. All rights reserved.</p>
      </div>
    </footer>
  </div>
</template>

<style scoped lang="scss">
header {
  nav {
    ul {
      display: flex;
      gap: 1.5rem;

      li {
        a {
          @apply text-gray-700 hover:text-primary transition-colors;
        }

        a.active {
          @apply text-primary font-medium;
        }
      }
    }
  }
}
</style>